<template>
  <div class="loginview" v-loading.fullscreen.lock="fullscreenLoading">
    <form class="loginform" method="post" @submit.prevent="vlogin">
      <div class="user-pic"></div>
      <div class="user-name">
        <el-input v-model="username" placeholder="用户名"></el-input>
      </div>
      <div class="user-pwd">
        <el-input v-model="password" type="password" placeholder="密码"></el-input>
      </div>
      <div>
        <el-button type="primary" id="btn-login" native-type="submit">登录</el-button>
      </div>
      <div class="flex-box flex-end">
        <el-button type="text">忘记密码？</el-button>
      </div>
      <div class="reg-panel">
        <span>还没有账号？</span>
        <a href='/register.html'>立即注册</a>
      </div>
    </form>

  </div>
</template>

<script>
import {
  mapActions,
  mapMutations,
  mapState,
} from 'vuex';
import cookie from '../server/cookie';

export default {
  name: 'userview',
  data() {
    return {
      username: '',
      password: '',
      labelPosition: 'right',
      checked: true,
    };
  },
  methods: {
    vlogin() {
      this.login({
        username: this.username,
        password: this.password,
      }).then((msg) => {
        debugger;
        if (!msg.emailVerified) {
          this.$message('请登录注册邮箱完成验证');
        } else {
          if (msg.sessionToken) {
            cookie.setCookie('sessionToken', msg.sessionToken, 300);
          }
          location.href = '/';
        }
      }).catch((msg) => {
        this.$message(msg.error);
      });
    },
    ...mapActions(['login']),
    ...mapMutations([]),
  },
  computed: {
    ...mapState({
      fullscreenLoading: state => state.sys.fullscreenLoading,
    }),
  },
  mounted() { },
  components: {},
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-box.flex-end {
  justify-content: flex-end;
}

body {
  background: -webkit-gradient(linear, 0 0, right bottom, from(rgba(0, 0, 0, 0.7)), to(#20a0ff));
  background-color: #20a0ff;
}

.loginview {
  padding: 1px;
}

#btn-login {
  width: 100%;
  margin-top: 10px;
}

.loginform {
  position: relative;
  background-color: white;
  width: 300px;
  margin: 15% auto;
  padding: 20px 100px;
  box-shadow: 0 0 2px;
  .user-name,
  .user-pwd {
    margin: 10px auto;
  }
  .user-pic {
    width: 180px;
    height: 180px;
    box-shadow: inset 0 0 4px #20a0ff;
    border-radius: 10em;
    margin: -130px auto 30px auto;
    background-color: white;
    background-image: url(../assets/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

.reg-panel {
  position: absolute;
  bottom: -2em;
  left: 50%;
  margin-left: -5em;
  color: white;
  span {
    font-size: 16px;
    color: #d1d9e0;
  }
  a {
    color: white;
    text-decoration: none;
  }
}
</style>
